<template>
  <div id="app">
    <!-- 路由视图 -->
    <transition mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- 置顶栏 -->
    <div class="toTop">
      <div
        v-show="$route.meta.title == '起点中文网-首页'"
        @click="$router.push({ path: '/bookshelf', query: { mode: false } })"
      >
        <span>最近阅读</span>
      </div>
      <div :class="{ show: show }" @click="toTop">
        <span class="iconfont icon-zhiding"></span>
      </div>
    </div>
  </div>
</template>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  user-select: none;
}
html,
body,
#app {
  width: 100vw;
  height: 100vh;
  background-color: #f6f7f9;
}
a{
  &:link{
    color: black;
  }
  &:visited{
    color: black;
  }
  &:hover{
    color: black;
  }
  &:active{
    color: black;
  }
}
ul,
li {
  list-style: none;
}

.toTop {
  position: fixed;
  bottom: 0.46875rem;
  right: 0.46875rem;
  & > div {
    width: 1.09375rem;
    height: 1.09375rem;
    line-height: 1.09375rem;
    font-size: 0.3125rem;
    background-color: #ed424b;
    border-radius: 50%;
    text-align: center;
    color: white;
    padding: 0.03125rem;
    margin-bottom: 0.46875rem;
    transition: opacity 0.8s;
    span {
      display: inline-block;
      padding: 0.15625rem;
      line-height: 0.390625rem;
    }
    &:nth-child(2) {
      background-color: #000;
      opacity: 0;
      &.show {
        opacity: 0.8;
      }
      span {
        vertical-align: middle;
        font-size: 0.625rem;
        opacity: 0.5;
      }
    }
  }
}
.mytoast {
  height: 0.71875rem;
  font-size: 0.390625rem;
  border-radius: 0.71875rem;
  padding: 0.15625rem 0.46875rem;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
// 全局
.margin{
  margin-top: 15px;
}
.v-enter {
  opacity: 0;
}
.v-leave-to {
  opacity: 0;
  transform-origin: top center;
  transform: scale(0.5);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toTop() {
      let timer = setInterval(() => {
        let current =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;

        let target = 0;
        let speed = (target - current) / 2;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (current + speed <= 0) {
          clearInterval(timer);
        }
        window.scrollTo(0, current + speed);
      }, 30);
    },
    handleScroll() {
      // 置顶
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let scrollHeight = document.documentElement.clientHeight;
      // console.log(scrollTop)
      if (scrollTop > scrollHeight) {
        this.show = true;
      } else {
        this.show = false;
      }
    },
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener("scroll", this.handleScroll);
    });
  },
};
</script>
